// 常用间距
@each $key in 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 110, 120 {
    .mt#{$key} {
        margin-top: #{$key}px;
    }

    .mr#{$key} {
        margin-right: #{$key}px;
    }

    .mb#{$key} {
        margin-bottom: #{$key}px;
    }

    .ml#{$key} {
        margin-left: #{$key}px;
    }

    .pt#{$key} {
        padding-top: #{$key}px;
    }

    .pr#{$key} {
        padding-right: #{$key}px;
    }

    .pb#{$key} {
        padding-bottom: #{$key}px;
    }

    .pl#{$key} {
        padding-left: #{$key}px;
    }

    .pd#{$key} {
        padding: #{$key}px;
    }
}

// 常用字号
@each $key in 0, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 46, 48, 50 {
    .fz#{$key} {
        font-size: #{$key}px;
    }
}

// 常用行高
@each $key in 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 40, 42, 46, 48, 50 {
    .lh#{$key} {
        line-height: #{$key}px;
    }

    .h#{$key} {
        height: #{$key}px;
    }
}

// vertical align
@each $key in top, middle, bottom {
    .va-#{$key} {
        vertical-align: #{$key};
    }
}

.text-break-word {
    word-wrap: break-word;
    overflow: hidden;
}

// 转大写
.text-uppercase {
    text-transform: uppercase;

    input {
        text-transform: uppercase;
    }
}

// 单行截断
// .line-clamp1 {
//     @extend %line-clamp1;
// }

.color-subtext {
    @extend %text-subtitle;
}

.color-title {
    @extend %text-main;
}

.color-link {
    @extend %text-primary;
}

.cursor-pointer {
    cursor: pointer;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align-last: left;
}

.text-center {
    text-align: center;
}

// 常用栅格布局
.flex-column-center-center {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}

.flex-column-start-start {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.flex-wrap-start-center {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}

.flex-start-start {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.flex-start-stretch {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.flex-start-center {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.flex-start-end {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-end;
}

.flex-start-center-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}

.flex-start-start-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.flex-center-center {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.flex-center-start {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
}

.flex-between-center {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.flex-between-center-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

.flex-between-start-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.flex-between-start {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.flex-end-start {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: flex-start;
}

.flex-end-center {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
}

.flex-1 {
    flex: 1;
}
